<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 530px;
      display: flex;
      justify-content: space-between;
    }

    img {
      width: 50px;
      height: 50px;
      border-radius: 25px;
    }

    .box textarea {
      width: 400px;
      height: 50px;
      transition: all 0.7s;
    }

    #tx:focus {
      height: 100px;
    }

    span {
      margin-left: 400px;
      opacity: 0;
      transition: all 0.7s;
    }
  </style>
</head>

<body>

  <div class="box">
    <img src="preview.jpg" alt="">
    <textarea maxlength="200" name="" id="tx" placeholder="发一条友善的评论"></textarea>
    <button>发布</button>
  </div>
  <span>0/200字</span>

  <script>
    const tx = document.querySelector('#tx')
    const span = document.querySelector('span')
    tx.addEventListener('input', function () {
      span.innerHTML = `${tx.value.length}/200字`
    })

    tx.addEventListener('focus', function () {
      span.style.opacity = 1
    })

    tx.addEventListener('blur', function () {
      span.style.opacity = 0
    })

  </script>
</body>

</html>